<template>
	<view class="info">
		<view v-if="company" class="company">

			<image class="pic" :src="company.imgUrl" mode=""></image>

			<view class="cinfo">
				<view class="title">{{company.name}}</view>
				<view class="tel">
					<image src="/static/images/phone.png"></image>
					投诉热线:{{company.phone}}
				</view>
			</view>
		</view>
		<view class="step">
			<uni-steps :options="steps" :active="0" direction="column"></uni-steps>
			<view class="ts" style="text-align: right;margin-top: 10px;">
				<text @tap="tousu">物流信息不对，我要投诉</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app"
	let id = ""
	onLoad((params) => {
		id = params.id
		console.log(id);
		getInfo(id)
		uni.setNavigationBarTitle({
			title: "物流查询"
		})
	})
   
    // 快递公司信息
	const company = ref({})
	// 快递步骤信息
	const steps = ref([])
	async function getInfo(id) {
		let res = await uni.$get("/prod-api/api/logistics-inquiry/logistics_info/" + id)
		company.value = res.data.company
		company.value.imgUrl = uni.$base_url + company.value.imgUrl
		 
		let arr = []
		res.data.stepList.forEach(item => {
			arr.push({
				title: `${item.stateName}[${item.addressAt}]`,
				desc: item.eventAt
			})
		})
		steps.value = arr

	}

	// 投诉
	function tousu() {
		uni.navigateTo({
			// url: "/pages/expressComplain/expressComplain?id=" + id
			url: "/pages/expressComplainList/expressComplainList?id=" + id
		})
	}
</script>

<style lang="scss">
	.info {
		background-color: #efefef;
		// border: 1px solid green;
		overflow: hidden;
		height: calc(100vh - 50px);

		.company {

			margin-top: 30px;
			display: flex;
			justify-content: space-around;
			overflow: hidden;

			.pic {
				width: 150rpx;
				height: 150rpx;
				border: 1px solid red;
			}

			.cinfo {
				width: 490rpx;

				.title {
					font-size: 28rpx;
					font-weight: bold;
				}

				.tel {
					margin-top: 15px;
					display: flex;
					font-size: 24rpx;

					image {
						height: 20px;
						width: 15px;
						margin-right: 5px;
					}
				}
			}
		}

		.step {

			margin-top: 25px;
			background-color: #fff;
			margin: 10px;
			padding: 10px;
			font-size: 12px;
			border-radius: 5px;
			box-shadow: 3px 3px 3px #ccc;
		}
	}
</style>